<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;/*去掉外边距*/
            background-image: url("img/Login.jpg");
            background-size: cover;/*设置封面*/
            text-align: center;/*页面内部的文本居中*/
        }
        h1{
            font-size: 72px;
            color: #0096dc;
            margin-bottom: 0;
        }
        img{
            width: 100px;
        }
        h2{
            font-size: 32px;
            color: #0096dc;
            margin-bottom: 0;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>体育局管理系统</h1>

    <el-card style="width: 600px;height: 500px;margin: 0 auto;
                background-color: rgba(255,255,255,0.3)">
        <!--label-width设置用户名这一列所占的宽度,如果不设置会显示在上面-->
        <el-form label-width="70px" style="width: 400px;margin: 50px auto">
            <h1 style="font-size: 24px"> 注册</h1>
            <el-form-item label="用户名">
                <el-input type="text"  maxlength="10" v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" maxlength="10" v-model="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确定密码">
                <el-input type="password" maxlength="10" v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="单位名称">
                <el-input type="text" maxlength="10" v-model="user.unit" placeholder="请输入单位名称"></el-input>
            </el-form-item>

            <el-form-item label="地市">
                <el-select v-model="user.locationId">
                    <el-option v-for="c in arr"
                               :label="c.name" :value="c.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button style="position: relative;right: 30px;width: 150px"
                        type="primary" @click="reg()">注册</el-button>
                <a href="/login.html" style="text-decoration: none;font-size: 18px">已有角色点击登录</a>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                user:{},
                password:'',
                arr:[{id:1,value:'太原'},{id:2,value:'运城'}]
            }
        },
       methods:{
           reg(){
               let IsU=/^[a-zA-Z0-9_-]{4,16}$/;
               let IsP=/^[a-zA-Z0-9_-].{8,16}$/;
               if (!IsU.test(v.user.username)){
                   /*4到16位(字母,数字,下划线,减号)*/
                   alert("请输入合法的用户名")
                   return;
               }
               if (!IsP.test(v.password)){
                   /*4到16位(字母,数字,下划线,减号)*/
                   alert("请输入合法的密码")
                   return;
               }
               if (v.user.password==v.password){
                   axios.post("/user/reg",v.user).then(function (p) {
                       if (p.data==1){
                           alert("注册成功")
                           location.href='/login.html'
                       }else {
                           alert("用户名已存在")
                       }
                   })
               }else {
                   alert("2次输入的密码不同")
               }

           }
       },
        created:function (){
            axios.get("/user/selectByRegion").then(function (p) {
                v.arr=p.data;
            })
        }
    })
</script>
</html>